import React, { useRef } from 'react';
import LOGIN from './login-a.module.scss';
import img1 from '@/assets/image/img1.png';
import img2 from '@/assets/image/img2.png';
import QQ from '@/assets/image/QQ.png';
import WECHAT from '@/assets/image/WeChat.png';
import { useNavigate } from 'react-router-dom';

const LoginA: React.FC = () => {
  const navigate = useNavigate();
  function handleClick() {
    localStorage.setItem('userName', 'al');
    navigate('/');
  }
  const peopleRef: any = useRef(null);
  const shapeRef: any = useRef(null);
  const peopleListener = () => {
    peopleRef.current?.classList.remove(LOGIN.p_animtion);
    peopleRef.current?.classList.add(LOGIN.p_other_animtion);
  };
  const shapeListener = () => {
    shapeRef.current?.classList.remove(LOGIN.s_animtion);
    shapeRef.current?.classList.add(LOGIN.s_other_animtion);
  };
  return (
    <div className={LOGIN.wrapper}>
      <div className={LOGIN.content}>
        <div className={LOGIN.left}>
          <img
            ref={peopleRef}
            src={img2}
            className={[LOGIN.people, LOGIN.p_animtion].join(' ')}
            alt="people"
            onAnimationEnd={peopleListener}
          />
          <img
            ref={shapeRef}
            src={img1}
            className={[LOGIN.sphere, LOGIN.s_animtion].join(' ')}
            alt="sphere"
            onAnimationEnd={shapeListener}
          />
        </div>
        <div className={LOGIN.right}>
          <div className={LOGIN.top}>
            <div className={LOGIN.top_item}>
              <span>首页</span>
            </div>
            <div className={LOGIN.top_item}>
              <span>注册</span>
            </div>
            <div className={LOGIN.top_item}>
              <span>浏览</span>
            </div>
            <div className={LOGIN.top_item}>
              <span>帮助</span>
            </div>
          </div>
          <div className={LOGIN.form_wrappepr}>
            <h1>欢迎登录系统</h1>
            <input
              type="text"
              className={[LOGIN.inputs, LOGIN.user].join(' ')}
              placeholder="邮箱"
            />
            <input
              type="password"
              className={[LOGIN.inputs, LOGIN.pwd].join(' ')}
              placeholder="密码"
            />
            <span className={LOGIN.tips}>忘记密码</span>
            <button onClick={handleClick}>登录</button>
            <div className={LOGIN.other_login}>
              <div className={LOGIN.divider}>
                <span className={LOGIN.line}></span>
                <span className={LOGIN.divider_text}>其他方式</span>
                <span className={LOGIN.line}></span>
              </div>
              <div className={LOGIN.other_login_wrapper}>
                <div className={LOGIN.other_login_item}>
                  <img src={QQ} alt="QQ" />
                </div>
                <div className={LOGIN.other_login_item}>
                  <img src={WECHAT} alt="WeChat" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default LoginA;
